<template>
  <div>
    <Header :type="'long'"> 会员权益-设置规则-设置商品价格 </Header>
    <Header>
      <el-button
        type="primary"
        size="small"
        @click="selectShop(1, '', listData)"
        >添加商品</el-button
      >
      <el-button plain size="small" @click="del('all')">批量移除</el-button>
      <div class="heads-right" style="width:26%;">
        <el-input
          v-model="shopSearch"
          placeholder="请输入商品名称"
          size="small"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="getList"
          ></el-button>
        </el-input>
      </div>
    </Header>
    <Main
      :data="listData"
      :row-key="getRowKeys"
      :footer-lock="totals > 10"
      @selection-change="handleSelectionChange"
    >
      <!-- <div class='top'>
          <el-button type='primary'
                       size='small'
                     @click='dialogVisibleShop = true;getShopList()'>添加商品</el-button>
          <el-button plain
                     @click='del('all')'>批量移除</el-button>
          <div style='float: right;width:26%;'>
            <el-input placeholder='请输入商品名称'
                      v-model='shopSearch'>
              <el-button slot='append'
                         icon='el-icon-search'
                         @click='getList'></el-button>
            </el-input>
          </div>

        </div> -->

      <el-table-column type="selection" :reserve-selection="true" width="55">
      </el-table-column>
      <el-table-column
        label="商品名称"
        align="center"
        property="goods_name"
      ></el-table-column>
      <el-table-column label="商品封面" align="center">
        <template slot-scope="scope">
          <img
            :src="
              $store.state.qiniu +
                scope.row.goods_cover[0] +
                $store.state.imgRotate
            "
            style="border-radius:6px;"
            width="50px"
            height="50px"
          />
        </template>
      </el-table-column>
      <el-table-column label="销售价格" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.low_goods_price == scope.row.up_goods_price"
            >￥{{ scope.row.low_goods_price }}</span
          >
          <span v-else
            >￥{{ scope.row.low_goods_price }} - ￥{{
              scope.row.up_goods_price
            }}</span
          >
        </template>
      </el-table-column>
      <el-table-column label="成本价格" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.low_cost == scope.row.up_cost"
            >￥{{ scope.row.low_cost }}</span
          >
          <span v-else
            >￥{{ scope.row.low_cost }} - ￥{{ scope.row.up_cost }}</span
          >
        </template>
      </el-table-column>
      <el-table-column label="折扣价格" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.low_discount == scope.row.up_discount"
            >￥{{ scope.row.low_discount }}</span
          >
          <span v-else
            >￥{{ scope.row.low_discount }} - ￥{{
              scope.row.up_discount
            }}</span
          >
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        fixed="right"
        class-name="tableoperation"
      >
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="edit(scope.row)">
            编辑
          </el-button>
          <el-button size="mini" type="text" @click="del(scope.row.goods_id)">
            移除
          </el-button>
        </template>
      </el-table-column>
    </Main>
    <Footer :total="totals" :type="'ordinary'">
      <el-pagination
        :page-size="10"
        layout="prev, pager, next"
        :total="totals"
        @current-change="changes"
      >
      </el-pagination>
    </Footer>

    <Footer>
      <el-button plain @click="$emit('outs')">返 回</el-button>
    </Footer>
    <el-dialog title="设置折扣价格" :visible.sync="dialogVisibleGZ" width="60%">
      <div class="list-table-boder">
        <el-table
          :data="discountList"
          tooltip-effect="dark"
          :stripe="true"
          height="500"
          header-row-class-name="table-header "
          row-class-name="table-row-one"
        >
          <el-table-column
            v-for="(item, index) in tableH"
            :key="index"
            :label="item"
            align="center"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.check != undefined">
                <span v-if="index === 0"
                  >批量设置

                  <el-switch v-model="scope.row.check"> </el-switch>
                </span>
              </div>
              <div v-else>{{ scope.row.sku_type_name[index] }}</div>
            </template>
          </el-table-column>

          <el-table-column
            label="销售价"
            align="center"
            property="sku_price"
          ></el-table-column>
          <el-table-column
            label="成本价"
            align="center"
            property="sku_original_price"
          ></el-table-column>
          <el-table-column label="折扣" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.check != undefined">
                <el-input-number
                  v-model="allDiscount"
                  :disabled="!scope.row.check"
                  style="width:100px;"
                  :controls="false"
                  :precision="2"
                  :min="1"
                  :max="10"
                  size="medium"
                ></el-input-number>
                &nbsp;折
              </div>
              <div v-else>
                <el-input-number
                  v-model="scope.row.discount"
                  style="width:100px;"
                  :controls="false"
                  :precision="2"
                  :min="1"
                  :max="10"
                  size="medium"
                ></el-input-number>
                &nbsp;折
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button plain @click="dialogVisibleGZ = false">取 消</el-button>
        <el-button type="primary" @click.stop="submitGZ('save')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <shop
      :dialog-visible="dialogVisible"
      :data-json="dataJson"
      @close="close"
    />
  </div>
</template>
<script>
import {
  SETAUTHORITYRULEGOODS,
  SETAUTHORITYRULEGOODSDISCOUNT,
  AUTHORITYRULEGOODSLIST
} from "../service";

export default {
  components: {
    shop: () => import("publicCom/shop")
  },
  props: {
    ruleId: { type: String, default: "" },
    val: { type: String, default: "" }
  },
  data() {
    return {
      allList: [],
      getRowKeys(row) {
        return row.id;
      },
      listData: [],
      totals: 0,
      pages: 1,
      edit_goods_id: "",
      dialogVisibleGZ: false,
      dialogVisible: false,
      dataJson: {},
      goodsArr: [],
      discountList: [],
      shopSearch: "",
      tableH: [],
      allDiscount: 1
    };
  },
  watch: {
    allDiscount(v) {
      if (v) {
        this.discountList.forEach(ele => {
          ele.discount = v;
        });
      }
    }
  },

  created() {
    this.getList();
  },

  methods: {
    handleSelectionChange(v) {
      this.allList = v;
    },
    close(e) {
      if (e) {
        this.shopSumbit(e);
      }
      this.dialogVisible = false;
    },
    selectShop(typeShop, flag, dataList) {
      this.dialogVisible = true;
      this.dataJson.typeShop = typeShop;
      this.dataJson.flag = flag;
      this.dataJson.shopDataList = dataList;
    },
    edit(e) {
      this.edit_goods_id = e.goods_id;
      this.dialogVisibleGZ = true;
      this.submitGZ();
    },
    changes(page) {
      this.pages = page;
      this.getList();
    },
    async getList() {
      await AUTHORITYRULEGOODSLIST({
        page: this.pages,
        pageshow: 10,
        rule_id: this.ruleId,
        search: this.shopSearch
      }).then(res => {
        let { code, data, msg } = res;
        if (code === 200) {
          if (data != null) {
            this.totals = data.count;
            this.listData = data.list;
            this.listData.forEach(ele => {
              ele.goods_cover = ele.goods_cover.split(",");
            });
          }
        } else {
          this.$message.error(msg);
          this.listData = [];
        }
      });
    },
    async shopSumbit(shopDataList) {
      let arr = [];
      shopDataList.forEach(ele => {
        arr.push(ele.goods_id);
      });
      let goodsIdArr = arr.join(",");
      await SETAUTHORITYRULEGOODS({
        rule_id: this.ruleId,
        goods_id_arr: goodsIdArr,
        val: this.val,
        flag: "save"
      }).then(res => {
        let { code, msg } = res;
        if (code === 200) {
          this.dialogVisibleShop = false;
          this.getList();
        }
        this.$message({
          message: msg,
          type: code === 200 ? "success" : "error"
        });
      });
    },
    async submitGZ(flag) {
      let json = {};
      if (flag) {
        this.discountList.forEach((ele, idx) => {
          if (idx !== this.discountList.length - 1) {
            json[ele.uniqueKey] = ele.discount;
          }
        });
        json = JSON.stringify(json);
      }
      await SETAUTHORITYRULEGOODSDISCOUNT({
        rule_id: this.ruleId,
        goods_id: this.edit_goods_id,
        flag,
        json
      }).then(res => {
        let { code, data, msg } = res;
        if (code === 200) {
          if (flag) {
            this.edit_goods_id = "";
            this.getList();
            this.$message.success(msg);
            this.dialogVisibleGZ = false;
          } else {
            data.forEach(ele => {
              this.tableH = ele.attr_names.split(",");
              ele.sku_type_name = ele.sku_type_name.split(",");
            });

            this.discountList = data;
            this.discountList.push({ check: false, allDiscount: 0 });
          }
        }
        if (flag) {
          this.$message({
            message: msg,
            type: code === 200 ? "success" : "error"
          });
        }
      });
    },
    handSelectalls(rows) {
      this.goodsArr = rows;
    },
    async del(id) {
      let goodsIdArr;
      await this.$confirm("是否移除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          if (id !== "all") {
            goodsIdArr = id;
          } else {
            if (this.goodsArr.length < 0) {
              return this.$message.error("请选择商品！");
            } else {
              goodsIdArr = [];
              this.goodsArr.forEach(item => {
                goodsIdArr.push(item.goods_id);
              });
              goodsIdArr = goodsIdArr.join(",");
            }
          }
          SETAUTHORITYRULEGOODS({
            rule_id: this.ruleId,
            goods_id_arr: goodsIdArr,
            flag: "update"
          }).then(res => {
            let { code, msg } = res;
            if (code === 200) {
              this.getList();
              this.$message.success(msg);
            } else {
              this.$message.error(msg);
            }
          });
        })
        .catch(() => {
          this.$message.info("已取消!");
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.top {
  width: 100%;
  text-align: left;
  padding: 20px 10px;
  border-bottom: 10px solid #f3f3f3;
}
</style>
